<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <style>
      * { margin: auto 0; padding: 0; }
      body {
        display: flex; justify-content: center; align-items: center;
        height: 100vh;
      }
      #control {
        position: fixed; top: 0; right: 0; width: 300px;
        padding: 10px; box-sizing: border-box;
        background: white; opacity: 0.3; color: #666;
      }
    </style>
  </head>
  <body>
    <div id="control">
      <select id="wrap-select">
        <option value="Repeat">Repeat</option>
        <option value="MirroredRepeat">Mirrored Repeat</option>
        <option value="ClampToEdge">Clamp to Edge</option>
      </select>
      <label for="wrap-select">Wrap</label>
      <br/>

      <select id="mag-filter-select">
        <option value="Linear">Linear</option>
        <option value="Nearest">Nearest</option>
      </select>
      <label for="mag-filter-select">Mag Filter</label>
      <br/>

      <select id="min-filter-select">
        <option value="Linear">Linear</option>
        <option value="Nearest">Nearest</option>
        <option value="NearestMipmapNearest">Nearest Mipmap Nearest</options>
        <option value="LinearMipmapNearest">Linear Mipmap Nearest</options>
        <option value="NearestMipmapLinear" selected>Nearest Mipmap Linear</options>
        <option value="LinearMipmapLinear">Linear Mipmap Linear</options>
      </select>
      <label for="min-filter-select">Min Filter</label>
      <br/>

      <input type="range" min="0.05" max="6" value="1" step="0.01" id="scale">
      <label for="scale">Scale</label>
    </div>
    <canvas width="400" height="400"></canvas>
    <script type="module" src="./texture-config.js"></script>
  </body>
</html>
